import IntegrationTable, {
	IntegrationTableProps,
} from "@/components/IntegrationTable";
import { ProColumns } from "@ant-design/pro-table";
import React, { useEffect, useState } from "react";
import { Button, Card, Row, Col, Statistic, Tabs, notification } from "antd";
import { ordinate, communityStatistics } from "./service";
import { getArray } from "phinney-toolkit";
import { Map, Marker, Markers, Polygon } from "react-amap";
import styles from "./index.css";
import { EnvironmentOutlined } from "@ant-design/icons";

const CommunityList: React.FC<any> = () => {
	// 组件是否已经卸载
	let isUnMounted = false;
	const [ordinateList, setOrdinateList] = useState<any>([]);
	//小区数据
	const [communityDate, setCommunityDate] = useState<any>({});
	//围栏数据
	const [communityPolygon, setCommunityPolygon] = useState<any>([]);
	//经纬度范围  默认为郑州市
	const [centerSize, setcenterSize] = useState<any>([113.625351, 34.746303]);

	const [zoomSize, setZoomSize] = useState<any>(10);

	// 获取组长小区
	const getManager = async () => {
		const res = await ordinate({});
		setOrdinateList(getArray(res.data.records));
	};

	const getCommunityStatistics = async () => {
		const res = await communityStatistics({});
		setCommunityDate({
			todayActiveNum: res?.data.todayActiveNum,
			totalCommunityNum: res?.data.totalCommunityNum,
			totalUserNum: res?.data.totalUserNum,
			yesterdayActiveNum: res?.data.yesterdayActiveNum,
		});
	};

	// 初始化加载数据
	useEffect(() => {
		getManager();
		getCommunityStatistics();
		return () => {
			isUnMounted = true;
		};
	}, []);

	const handeleClick = (item: any) => {
		console.log(item);
		notification.open({
			message: `${item.communityCode}-${item.communityName}`,
			description: `详细地址：${item.communityAddress}`,
			icon: <EnvironmentOutlined style={{ color: "#108ee9" }} />,
			onClick: () => {
				console.log("Notification Clicked!");
			},
		});
	};

	return (
		<div>
			<Card style={{ marginBottom: 20 }}>
				<Row>
					<Col span={6}>
						<Statistic
							title="覆盖小区总数"
							value={communityDate.totalCommunityNum}
						/>
					</Col>
					<Col span={6}>
						<Statistic title="覆盖总人数" value={communityDate.totalUserNum} />
					</Col>
					<Col span={6}>
						<Statistic
							title="昨日活跃"
							value={communityDate.yesterdayActiveNum}
						/>
					</Col>
					<Col span={6}>
						<Statistic title="今日活跃" value={communityDate.todayActiveNum} />
					</Col>
				</Row>
			</Card>

			<Card bordered={false} hoverable>
				<div
					className="container"
					id="container"
					style={{ width: "100%", height: 700 }}
				>
					<Map
						version="1.4.4"
						amapkey="10c01e3af3272d167f7ab9880eb137c5"
						useAMapUI
						center={centerSize}
						// center={[113.688145, 34.795439]}
						plugins={["ToolBar"]}
						resizeEnable={true}
						mapStyle={"amap://styles/6211b93913da10dfdbfd307d2edc004e"}
						// 2389FF
					>
						<Polygon
							path={communityPolygon}
							zIndex={50}
							style={{
								strokeColor: "#2389FF",
								fillOpacity: "0.1",
								fillColor: "#2389FF",
								extData: "solid",
							}}
						></Polygon>
						{ordinateList.map((item: any, index: any) => {
							return (
								<Marker
									key={index}
									events={{
										click: (MapsOption: any, marker: any) => {
											if (!item.specShapeArrays || !item.points) return;
											setCommunityPolygon(item.specShapeArrays);
											setcenterSize(item.points);
											setZoomSize(0);
											setZoomSize(18);
											// let zoom = 14
											// Map.setPointToCenter(400,400)
										},
										// click: (MapsOption: any, marker: any) => {
										// 	console.log(111);
										// },
										// mouseover: (MapsOption: any, marker: any) => {
										// 	console.log(MapsOption, marker);
										// },
										// mouseout: (MapsOption: any, marker: any) => {
										// 	console.log(MapsOption, marker);
										// },
									}}
									content={`<div class=${styles.info}>${item.communityName}-${
										item.businessStatus == 0 ? "未开通" : "已开通"
									}</div>`}
									useCluster
									position={[Number(item.lon), Number(item.lat)]}
								/>
							);
						})}
						{/* <Marker position={[113.636975, 34.728297]}  (",") />
						<Marker position={[113.661181, 34.726167]} /> */}
					</Map>
				</div>
			</Card>
		</div>
	);
};

export default CommunityList;
